import React, { PureComponent } from 'react';
import { ILowCodePluginContext, project } from '@alilc/lowcode-engine';
import { Button, Icon } from '@alifd/next';
import { PluginProps, IPublicTypeDisposable } from '@alilc/lowcode-types';

import './index.scss';

export interface IProps extends PluginProps {
    logo?: string;
}

export interface IState {
    undoEnable: boolean;
    redoEnable: boolean;
}

class UndoRedo extends PureComponent<IProps, IState> {
    static displayName = 'LowcodeUndoRedo';
    private history: any;
    private changeDocumentDispose?: IPublicTypeDisposable;
    private changeStateDispose?: IPublicTypeDisposable;
    constructor(props: any) {
        super(props);
        this.state = {
            undoEnable: false,
            redoEnable: false,
        };
        this.init();
    }
    init = (): void => {
        this.changeDocumentDispose = project.onChangeDocument(doc => {
            //doc: document
            this.history = doc.history;
            this.updateState(0);
            this.changeStateDispose?.();
            this.changeStateDispose = this.history.onChangeState(() => {
                // 这个变化指的是 前进 后退 操作时
                console.log(this.history?.getState());
                this.updateState(this.history?.getState() || 0);
            });
        });
    };
    updateState = (state: number): void => {
        // 1 1 1 => 7 5 2
        this.setState({
            undoEnable: state !== 2,
            redoEnable: state !== 5,
        });
    };
    handleUndoClick = (): void => { this.history.back(); };
    handleRedoClick = (): void => { this.history.forward(); };
    componentWillUnmount() {
        this.changeDocumentDispose?.();
        this.changeStateDispose?.();
    }
    render(): React.ReactNode {
        const { undoEnable, redoEnable } = this.state;
        return (
            <div className="lowcode-plugin-undo-redo">
                <Button
                    size="medium"
                    data-tip="撤销"
                    data-dir="bottom"
                    onClick={this.handleUndoClick}
                    ghost
                    className={'operate-button'}
                    disabled={!undoEnable}
                >
                    <Icon type="houtui" />
                </Button>
                <Button
                    size="medium"
                    data-tip="恢复"
                    data-dir="bottom"
                    onClick={this.handleRedoClick}
                    ghost
                    className={'operate-button'}
                    disabled={!redoEnable}
                >
                    <Icon type="qianjin" />
                </Button>
            </div>
        );
    }
}

const plugin = (ctx: ILowCodePluginContext) => {
    return {
        // 插件名，注册环境下唯一
        name: 'PluginUndoRedo',
        // 依赖的插件（插件名数组）
        dep: [],
        // 插件的初始化函数，在引擎初始化之后会立刻调用
        init() {
            // 往引擎增加面板
            ctx.skeleton.add({
                area: 'topArea',
                type: 'Widget',
                name: 'undoRedo',
                content: UndoRedo,
                props: {
                    align: 'right',
                    width: 88,
                },
            })
        },
    };
};

plugin.pluginName = 'PluginUndoRedo'

export default plugin